<template>

	<view class="container backgroundClass">
		<!-- <scroll-view scroll-y style="width: 100%; height: 100vh;"> -->
		<view class="tui-banner-swiper">
			<!-- #ifdef MP-WEIXIN || H5 -->
			<swiper :indicator-dots="true" indicator-color="#fff" indicator-active-color="#E96D71" :autoplay="false " :interval="5000"
			 :duration="150" :circular="true" @change="bannerChange" class="" :style="{height:scrollH+'px'}">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item :data-index="index">
						<image v-if="index>=videoLength" lazy-load :src="imgSrc+item" class="tui-slide-image" :style="{height:scrollH+'px'}"/>
						<video v-else :enable-progress-gesture = "false" :poster="imgSrc+banner[0]" class="tui-slide-image" :id="'myVideo'+index" :src="imgSrc+videoUrl"
						 @error="videoErrorCallback" :autoplay='false' :show-fullscreen-btn="true" show-center-play-btn controls :style="{height:scrollH+'px'}"></video>
					</swiper-item>
				</block>
			</swiper>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="product-detail-swiper"></view>
			<!-- #endif -->
		</view>
		<!-- 商品详细信息 -->
		<view class="tui-pro-detail">
			<view class="tui-product-title">
				<view class="" style="width: 100%;">
					<view class="pro-price-wrapper" v-if="goodData.preSaleFlag!==1">
						<view class="pricebox">
							<view class="tui-pro-pricebox tui-padding">
								<view class="tui-pro-price">
									<view>￥{{goodData.goodsPrice||' '}}</view>
								</view>
							</view>
							<!-- <view class="tui-original-price tui-gray">
								<text class="tui-line-through">￥{{goodData.productMarketPrice||0}}</text>
							</view> -->
						</view>
					</view>
					<!-- 商品名称 -->
					<view class="tui-pro-titbox">
						<view class="tui-pro-title goodsNameClass">{{goodData.goodsName||''}}</view>
					</view>
					<!-- 商品描述 -->
					<view class="tui-pro-titbox">
						<view class="tui-pro-desc">{{goodData.goodsSummary||''}}</view>
					</view>
				</view>

			</view>
			<!-- <view class="tui-coupon-info">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">商品简介</view>
				</view>
				<view class="coupinContent">
					{{goodData.goodsSummary}}
				</view>
			</view> -->
			<view class="tui-coupon-info">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">商品规格</view>
				</view>
				<view class="coupinContent">
					{{goodData.goodsSpec||''}}
				</view>
			</view>
			<!-- <view class="tui-coupon-info">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">商品价格</view>
				</view>
				<view class="coupinContent">
					￥{{goodData.goodsPrice||0}}
				</view>
			</view> -->
			<!-- 商品详情 -->
			<view class="tui-coupon-info goodsDetailClass">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">商品详情</view>
				</view>
				<view class="">
					<view class="tui-product-img">
						<view class="detailsBox" v-for="(item,index) in goodsDetailImg" :key="index">
							<image class="detailsImg" :src="imgSrc+item" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <tui-nomore text="已经到最底了" :visible="true" bgcolor="#f2f2f2"></tui-nomore> -->
			<view class="tui-safearea-bottom"></view>
		</view>
		<!-- </scroll-view> -->
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixin from "@/utils/mixin.js"

	export default {
		mixins: [mixin],
		components: {
		},
		data() {
			return {
				productId:'',
				imgSrc: this.$store.state.imgUrl,
				banner: [],
				goodData: {},
				goodsDetailImg:[],
				videoUrl:'',
				videoLength:0,
				scrollH:0
			}
		},
		mounted() {
			console.log(8888)
			console.log(this.productId)
			this.queryGoodsDetail(this.productId);
			// #ifdef APP-PLUS
			const subNvue = uni.getSubNVueById('swiperShop'); //初始化subnvue对象 'swiper'为pages.josn中注册时的唯一标识
			subNvue.show(); //显示subnvue;更多方法请·查看官方文档
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.scrollH = res.windowWidth/2
					}
				})
			}, 50);
		},
		onLoad(options) {
			if(options){
				this.productId=options.productId
			}
		},
		methods: {
			//获取正常商品详情
			queryGoodsDetail(id) {
				this.banner = []
				this.$http.tEsGoodsDetail(id).then((res) => {
					if (res.status === 0) {
						console.log(res.data);
						this.goodData = res.data
						if (res.data.esGoodsImgsData) {
							res.data.esGoodsImgsData.forEach(item=>{
								if(item.imgIndex===-3){
									this.videoUrl=item.imgReuri
									this.videoLength=1
								}
								if(item.imgIndex===-2){
									this.goodsDetailImg.push(item.imgReuri)
								}
							})
						}
						res.data.esGoodsCarouselImageData.forEach((item) => {
							this.banner.push(item.goodsCarouselImagePath)
						})
						// #ifdef APP-PLUS
						uni.$emit('bannerShop', {
							banner: this.banner,
							videoLength: this.videoLength,
							url: this.videoUrl,
							scrollH:this.scrollH
						})
						// #endif
					}
				})
			},
			tab(date) {
				if (date) {
					var endtime = date.split(' ');
					// console.log(endtime)
					if (endtime[1] === '24:00:00') {
						endtime[1] = '23:59:59'
					}
					date = endtime.join(' ')
					let datatime = date.replace(/\-/g, "/")
					var oDate1 = new Date(datatime);
					var oDate2 = new Date();
					if (oDate1.getTime() > oDate2.getTime()) {
						return true
					} else {
						return false
					}
				} else {
					return false
				}

			},

			//正常商品 判断处于什么是否上下架状态
			normalStatus(date) {
				if (date) {
					var endtime = date.split(' ');
					// console.log(endtime)
					if (endtime[1] === '24:00:00') {
						endtime[1] = '23:59:59'
					}
					var dateEnd = endtime.join(' ')
					let datatime = dateEnd.replace(/\-/g, "/")
					var oDate1 = new Date(datatime);
					var oDate2 = new Date();
					if (oDate1.getTime() < oDate2.getTime()) {
						return true
					} else {
						return false
					}
				} else {
					return false
				}

			},
			bannerChange(e) {
				this.bannerIndex = e.detail.current
			},
		},

	}
</script>

<style lang="scss">

	.backgroundClass {
		background-color: #f7f7f7;
		// overflow: hidden;
		// overflow-y: auto;
		// height: 100vh;
	}
	.backgroundClass::-webkit-scrollbar {
	        display: none;/*隐藏滚动条*/
	}

	.container {
		padding-bottom: 100rpx;
	}
	.product-detail-swiper {
		height: 372rpx !important;
	}
	.tui-slide-image {
		width: 100%;
		// height: 352rpx !important;
		display: block;
	}

	.tui-banner-swiper {
		position: relative;
		min-height: 372rpx;
	}

	// .tui-banner-swiper .tui-tag-class {
	// 	position: absolute;
	// 	color: #fff;
	// 	bottom: 30rpx;
	// 	right: 0;
	// }
	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	// .tui-banner-swiper .wx-swiper-dot {
	// 	width: 8rpx;
	// 	height: 8rpx;
	// 	display: inline-flex;
	// 	background: none;
	// 	justify-content: space-between;
	// }

	// .tui-banner-swiper .wx-swiper-dot::before {
	// 	content: '';
	// 	flex-grow: 1;
	// 	background: rgba(255, 255, 255, 0.8);
	// 	border-radius: 16rpx;
	// 	overflow: hidden;
	// }

	// .tui-banner-swiper .wx-swiper-dot-active::before {
	// 	background: #fff;
	// }

	// .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	// 	width: 16rpx;
	// }
	/*内容 部分*/
	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: $red;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;

		.tui-pro-titbox {
			@include multiline-text-overflow;
			font-size: 28rpx;
			font-weight: 500;
			position: relative;
			padding: 0 30rpx;
			margin-top: 10rpx;
			box-sizing: border-box;

			.tui-pro-desc {
				font-size: 24rpx;
				color: #8a8a8a;
				margin-left: 5rpx;
			}
			.goodsNameClass{
				font-weight: bold;
			}
		}

		.tui-product-title {
			background: #fff;
			padding-bottom: 20rpx;
			position: relative;
			display: flex;
			justify-content: space-between;
			min-height: 170rpx;
		}

		.pro-price-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;

			.pricebox {
				display: flex;
				align-items: center;
			}

			.tui-pro-pricebox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #EA655E;
				font-size: 44rpx;
				// font-weight: bold;
				line-height: 44rpx;


			}

			.tui-pro-price {
				display: flex;
				align-items: center;
			}

			.tui-original-price {
				font-size: 28rpx;
			}

			.tui-line-through {
				text-decoration: line-through;
			}

		}


		.tui-product-img {
			border-top: 2rpx solid transparent;
			background-color: #fff;
			.detailsImg {
				width: 100%;
				display: block;
			}
		}
	}

	.tui-coupon-info {
		background: #fff;
		// border-radius: 24rpx;
		margin-top: 20rpx;
		overflow: hidden;
		min-height: 140rpx;
		.coupinContent {
			// border-top: 1px solid #f2f2f2;
			display: flex;
			align-items: center;
			margin: 0 30rpx 20rpx 30rpx;
			padding-top: 10rpx;
			padding-left: 10rpx;
			font-size: 28rpx;
			color: #8a8a8a;

			.imgClass {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			.skuNum {
				font-size: 24rpx;
				background-color: #bdbdbd;
				border-radius: 20rpx;
				padding: 10rpx 15rpx;
			}
		}

		.tui-list-cell {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			line-height: 26rpx;
			padding: 26rpx 30rpx;
			box-sizing: border-box;
			.skuChoice {
				border-bottom: #ccc;
			}

			.tui-ml-auto {
				margin-left: auto;
			}
			
			.couponicon {
				font-size: 32rpx;
				color: #121212;
				font-weight: bold;
			}
		}
	}
	.goodsDetailClass{
		margin-top: 0;
		background: #f7f7f7;
	}

	.parase-content {
		color: #333;
		font-size: 28rpx;
		text-align: left;
	}
</style>
